<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>故障处理流程</title>
  <link href="css/layui.css" rel="stylesheet" type="text/css" />
  <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">
            <p class="title-row"> 故障处理流程</p>
            <p class="layadmin-font-em">应急故障点<span class="fault-point-name"
                style="margin-left: 20px; color: burlywood;"></span></p>
          </div>
          <div class="layui-card-body">
            <form class="layui-form " action="" id="tagStateForm" style="display:none">
              <div class="layui-form-item proBox">
                <h3 class="title-row">专业状态</h3>
                <div style="color: #fff; text-align: center; margin:30px 0;">
                  <!-- <input type="checkbox" name="state9" title="供电" lay-filter="cOne" class="cOne state9" tag_value="9">
                  <input type="checkbox" name="state10" title="车辆" lay-filter="cOne" class="cOne state10"
                    tag_value="10">
                  <input type="checkbox" name="state11" title="通号" lay-filter="cOne" class="cOne state11"
                    tag_value="11">
                  <input type="checkbox" name="state12" title="工务" lay-filter="cOne" class="cOne state12"
                    tag_value="12">
                  <input type="checkbox" name="state13" title="物后" lay-filter="cOne" class="cOne state13"
                    tag_value="13"> -->
                  <a onClick="openPopUpPage('9','供电');" class="layui-btn layui-btn-sm state9" id="event_9" lay-event="event_0" major_value="9">供电</a>
                  <a onClick="openPopUpPage('10','车辆');" class="layui-btn layui-btn-sm state10" id="event_10" lay-event="event_1" major_value="10">车辆</a>
                  <a onClick="openPopUpPage('11','通号');" class="layui-btn layui-btn-sm state11" id="event_11" lay-event="event_2" major_value="11">通号</a>
                  <a onClick="openPopUpPage('12','工务');" class="layui-btn layui-btn-sm state12" id="event_12" lay-event="event_3" major_value="12">工务</a>
                  <a onClick="openPopUpPage('13','物后');" class="layui-btn layui-btn-sm state13" id="event_13" lay-event="event_4" major_value="13">物后</a>
                </div>
              </div>
            </form>
            <div class="maintenance">
              <h3 class="title-row">维保总体处理流程 <div id="option_btn">
                  <button class="layui-btn layui-btn-sm add" type="button" style="float: right; margin: 10px; display:none"
                    data-method="add" id="addFlowBtn">
                    <i class="layui-icon layui-icon-add-1 layuiadmin-button-btn"></i>
                    添加流程
                  </button>
                </div>
              </h3>

              <div class="stateTable">
                <table class="layui-hide" id="p_list" lay-filter="flowTableList"></table>
              </div>
            </div>
            <div class="result">
              <h3>处理结果</h3>
              <p>故障类型</p>
              <p>故障响应时间<span class="fault-response-time"></span></p>
              <p>故障处理时间<span class="fault-deal-time"></span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="../static/layui.js"></script>
  <script src="index.js"></script>
  <script>

    var num = 4;
    //一般直接写在一个js文件中
    var flowData = {};
    layui.use(['layer', 'form', 'table'], function () {
      var layer = layui.layer
        , $ = layui.$
        , table = layui.table //表格
        , form = layui.form;
      //执行一个 table 实例
      var tableRow = window.parent.getTableRow();
      window.openPopUpPage = function(id, name){
        openPopUpWindow(id,name);
      }
      
      
      window.renderIndexTable=function(){
        var tableRowTemp = window.parent.getTableRow();
        flowData.faultID = tableRowTemp.faultID;
        $('.fault-point-name').text(tableRowTemp.faultID);
        $.ajax({
          url: 'http://127.0.0.1:10110/FlowMajor/getFlowMajorAll'
          , type: 'post'
          , data: { faultId: tableRowTemp.faultID }
          , contentType: 'application/x-www-form-urlencoded'
          // , data: JSON.stringify(param)
          , responseType: 'json'
          , success: function (req) {
            $('.fault-response-time').text((req.diffList[0].ansDiff == null) ? '--:--' : (req.diffList[0].ansDiff + 'min'));
            $('.fault-deal-time').text((req.diffList[0].disDiff == null) ? '--:--' : (req.diffList[0].disDiff + 'min'));
            var majorList = req.majorList;
            console.log(majorList);
            for (var i = 0; i < majorList.length; i++) {
                  // $(".state"+majorList[i]).prop("checked", true);
                  $(".state"+majorList[i]).attr('tag_value', majorList[i]);
                  $(".state"+majorList[i]).css("background-color","#FF5722");
                  // $(".state9").css("background-color","#FF5722");
              // switch (majorList[i]) {
              //   case 9:
              //     $(".state9").prop("checked", true);
              //     $(".state9").attr('tag_value', 9);
              //     break;
              //   case 10:
              //     $(".state10").prop("checked", true);
              //     $(".state10").attr('tag_value', 10);
              //     break;
              //   case 11:
              //     $(".state11").prop("checked", true);
              //     $(".state11").attr('tag_value', 11);
              //     break;
              //   case 12:
              //     $(".state12").prop("checked", true);
              //     $(".state12").attr('tag_value', 12);
              //     break;
              //   case 13:
              //     $(".state13").prop("checked", true);
              //     $(".state13").attr('tag_value', 13);
              //     break;
              // }
            }

          
            form.render();
            table.render({
              elem: '#p_list'
              , height: 420
              // , url: 'http://127.0.0.1:10110/FlowMajor/getFlowMajorAll' //数据接口
              // , parseData: function (res) {
              //             return {
              //                 "code": 0,
              //                 "msg": '',
              //                 "count": req.rows.length,
              //                 "data": req.rows
              //             };
              //         }
              , data: req.rows
              , cols: [[ //表头
                { field: 'answerTime', title: '预计完成时间', align: 'center', templet: generateTime }
                , { field: 'disposeTime', title: '实际完成时间', align: 'center', templet: generateConfirmTime }
                , { field: 'flowName', title: '结果', align: 'center', templet: generateFlowEvent }
                // , { field: 'LAY_TABLE_INDEX', align: 'center', width: 150, templet: generateToolBar }
              ]]
              , done: function (res, curr, count) {
                if (res.count == 0) {
                  $("#addFlowBtn").css('display','inline');
                  $("#tagStateForm").css('display','none');
                  
                  $(".layui-table-main").html('<div class="layui-none">当前无此流程，如需加入请点击添加按钮</div>');
                } else{
                  $("#addFlowBtn").css('display','none');
                  $("#tagStateForm").css('display','inline');
                }
                
              }
            });
          }
        })
      }


      $('.sureBtn').on('click', function () {
        if (checkNum > 0) {
          let thatIndex = $(this).parents('li').index()
          $(this).css("display", "none").parents('li').eq(thatIndex).find('.sureBtn');
          $(this).css("display", "none").parents('li').siblings().eq(thatIndex).find('.sureBtn').css("display", "block");
          $(this).parents("li").removeClass('colorRed').addClass("colorBlack").siblings().eq(thatIndex).addClass("colorRed")
          data[thatIndex].state = 2;
          data[thatIndex + 1].state = 1;
        } else {
          alert('请选择专业状态！')
        }
      })

      $('#addFlowBtn').on('click', function () {
        layer.open({
          type: 2
          , title: 'false'
          , content: 'addFlow.html'
          , area: ['90%', '90%']
          , yes: function (index, layero) {


          },
          success: function (layero, index) {
            $(".layui-layer-title")[0].innerText = '故障点' + tableRow.faultID + '添加处理流程';
          },
        });
      })



      // form.on('checkbox(cOne)', function (data) {
        
      // });
      function openPopUpWindow(tag_value,tag_name){

        flowData.tag = tag_value;
        flowData.faultID = tableRow.faultID;

        setFlowData(tableRow.faultID,tag_value);
        window.checkTitle = tag_name;
        layer.open({
          type: 2
          , title: 'false'
          , content: 'popup.html'
          , area: ['90%', '90%']
          , yes: function (index, layero) {
            //点击确认触发 iframe 内容中的按钮提交
            // var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
            // submit.click();

          },
          success: function (layero, index) {
            $(".layui-layer-title")[0].innerText = tag_name + '处理流程';
          },
        });
      }


      table.on('tool(flowTableList)', function (obj) {
        var data = obj.data;
        if (obj.event === 'sure') {
          // obj.tr[0].childNodes[2]
          // obj.tr[0].childNodes[2].style.display='none'



          //确定按钮当前所在行
          index = obj.tr[0].attributes['data-index'].value;
          var currentElm = $("tr[data-index='" + index + "']");
          $(currentElm).find('a').css('display', 'none');
          $(currentElm).find('.p_content').css('color', 'black');
          $(currentElm).find('.p_time').css('color', 'black');

          //确定按钮下一行
          index = parseInt(index, 10) + 1;
          var indexElm = $("tr[data-index='" + index + "']");
          $(indexElm).find('a').css('display', 'block');
          $(indexElm).find('.p_content').css('color', '#FF5722');
          $(indexElm).find('.p_time').css('color', '#FF5722');

        } else if (obj.event === 'delete') {
          layer.confirm('真的删除行么', function (index) {
            obj.del();
            layer.close(index);
          });
        }
      });
      renderIndexTable();
    });
    
    
    function getTableRow() {
      return flowData;
    }
    function refreshAddFormData(){
      renderIndexTable();
      window.parent.refreshData();
    }
    function getMajorConfig(){
        return window.parent.getMajorConfig();
    }
  </script>
</body>

</html>